<template>
  <div>
    修改用户信息{{id}}，名称{{name}}
  </div>
</template>
<script>
    export default {
        layout: "test",

        async asyncData() {
            var b = await new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve("2");
                    console.log(2)
                }, 2000)
            });
            var a = await new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve("1");
                    console.log(1)
                }, 1000)
            });
            return {
                name: '从零开始'
            }
        },


        data() {
            return {
                id: '',
                name: ''
            }
        }
        ,
        //方法区
        methods: {
            //获取名称的方法
            getNameValue: function () {
                //模拟从服务端获取数据
                this.name = '从零开始'
            }
            ,
            // a: function () {
            //     //使用promise完成异步调用
            //     return new Promise((resolve, reject) => {
            //         //设置一秒后弹出1
            //         setTimeout(function () {
            //             resolve("1");
            //         }, 1000)
            //     })
            // },
            // b: function () {
            //     return new Promise((resolve, reject) => {
            //         //设置两秒后弹出2
            //         setTimeout(function () {
            //             resolve("2");
            //         }, 2000)
            //     })
            // }
        }
        ,
        //钩子方法
        mounted() {
            //从请求中获取参数
            this.id = this.$route.params.id;
            console.log(this.id);
            // this.getNameValue();

            //先执行b方法，后执行a方法，执行结果为a方法先执行(promise实现了异步调用)
            // this.b().then(res => {
            //     alert(res)
            // });
            // this.a().then(res => {
            //     alert(res)
            // });
        }
    }
</script>
<style>
</style>
<!--
  请求中携带参数，并获取
  命名为 _id.vue,请求页面需携带id参数
-->

<!--
  从服务端获取数据在客户端赋值，页面源代码没有数据，不利于SEO
  所以需要在服务端赋值完成，返回到客户端时即为完整的页面，才有利于SEO
-->

<!--
  asyncData()方法在组件加载之前调用，相当于在服务端完成
  在该方法内加载数据，到客户端组件加载时，得到的即为完整的页面数据，
  查看页面源代码，即可看到显示数据
-->

<!--
  promise方法是异步调用
  可以在asyncData()方法中使用async和await两个关键字实现同步调用
-->
